Ext.namespace('GH.ui', 'GH.ui.forms');

GH.ui.forms.LoginForm = Ext.extend(Ext.FormPanel, {
	 
	border:false,
	frame:true,
	//layout:'fit',
    labelAlign: 'right',
    labelWidth: 80,
    //autoScroll:true,
    
    url: '/auth/authenticate',
    
    defaults: {
        anchor: '92%',
        //width: 230,
      },
    
    initComponent: function() {
        Ext.apply(this, {
            
            
            
            items: [
				new Ext.form.TextField({
					id:"username",
					fieldLabel:"Username",
					allowBlank: false,
					//anchor: '92%', // anchor width by percentage
					blankText:"Enter your username",
				}),
				
				
				new Ext.form.TextField({
					id:"password",
					fieldLabel:"Password",
					inputType: 'password',
					allowBlank: false,
					//anchor: '92%', // anchor width by percentage
					blankText:"Enter your password"
				})
			],
			
			buttons:[
		                new Ext.Button({
		                    handler: this.authSubmit,
		                    scope: this,
		                    text: 'login',
		                })
		    ],
        });

        GH.ui.forms.LoginForm.superclass.initComponent.apply(this, arguments);

        this.form.on('post_action_successful', this.initialConfig.handler.post_success, this.initialConfig.scope);
        this.form.on('post_action_failed', this.initialConfig.handler.post_failure, this.initialConfig.scope);        
        
    },
    
    
    authSubmit: function(){
        this.form.submit({
            clientValidation: true,
            method: 'POST',
            waitTitle:'Connecting', 
            waitMsg:'Sending user info...',
            url: this.url,
            params: {
            	csrfmiddlewaretoken: Ext.get("hidden-csrf").dom.children[0].children[0].value,
            },
            
            // Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp as seen below. The server would 
			// actually respond with valid JSON, 
			// something like: response.write "{ success: true}" or 
			// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
            success:function(form, action){ 
                   Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
					   if (btn == 'ok'){
						   //Ext.Msg.alert(Ext.util.JSON.decode(action.response.responseText).text.welcome);
						   redirectUrl = Ext.util.JSON.decode(action.response.responseText).next;
						   form.fireEvent('post_action_successful', redirectUrl);
	                    }
			       });
            },
 
			// Failure function, see comment above re: success and failure. 
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.  
            failure:function(form, action){ 
                    if(action.failureType == 'server'){ 
                        obj = Ext.util.JSON.decode(action.response.responseText); 
                        Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                    }else{ 
                        Ext.Msg.alert('Warning!', 'Authentication Failed. Reason: ' + action.failureType); 
                    } 
                    form.reset();
                    form.fireEvent('post_action_failed');
            } 
        });
    }
});

//register xtype
Ext.reg('GeneralHospitalLoginForm', GH.ui.forms.LoginForm);